﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>分享下2015年的网页布局有哪些新的创意_我的网站</title>
    <meta name="keywords" content="网页布局,网站设计趋势" />
    <meta name="description" content="每年都会有一些新的网页布局创意产生，而使一些较老的布局方案淘汰。毫无疑问，2015年的网页布局是要响应各种终端设备。实际上，这种趋势早在2010年就在国外开始蔓延，我们可以" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="copyright" content="Copyright dedecms51.com 版权所有" />
    
    <link href="/templets/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/templets/Content/inner.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="/templets/Scripts/html5shiv.min.js"></script>
    <![endif]-->
    <script src="/templets/Scripts/jquery.min.js"></script>
    <script src="/templets/Scripts/bootstrap.min.js"></script>
    <script src="/templets/Scripts/inner.min.js"></script>
</head>

<body>
<header>
    <div class="box">
	    <a href="/" title="织梦网站建设与制作"><img src="/templets/Picture/logo_cases.png" alt="织梦设计出品" /></a>
        <div class="wechat">
    	    <img src="/templets/Picture/wechat_code.jpg" alt="扫描关注网站建设微信公众账号" class="wechat" /><p>扫一扫微信二维码<i></i></p>
        </div>
        <nav>
          <ul>
            <li><a href="/">织梦首页</a></li>
            
            <li><a href="/a/cases/">设计案例</a></li>
            <li class='active'><a href='/a/news/' style='color:white;'>文章动态</a></li>
          </ul>
        </nav>
    </div>
    <footer>
	    高端定制，品牌设计<br /><u>2008 - 2015</u>作品集<br /><a href="http://www.dedecms51.com/" target="_blank">郑州网站建设与制作公司</a>
    </footer>
</header>
    
    <section class="toolbar">
    	<a href="/" title="返回首页" class="homelink"><span class="glyphicon glyphicon-chevron-left"></span></a>
    	<span class="switch glyphicon glyphicon-th-list"></span>
        <div class="btnList">
            <div class="link btn-group">
        	    <a href="/a/news/experience/" class="btn btn-default">文章列表</a>
            </div>
            <div class="link btn-group">
        	    <a href="/a/news/experience/2015/0429/47.html" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span>PREV</a>
            </div>
            <div class="link btn-group">
        	    <a href="/a/news/experience/2015/0429/49.html" class="btn btn-default">NEXT<span class="glyphicon glyphicon-arrow-right"></span></a>
            </div>
        </div>
    </section>
    
    <section class="artshow content">
        <div class="box">
        	<h1>分享下2015年的网页布局有哪些新的创意</h1>
            <span class="rel">
            	织梦科技<u>•</u>2015-04-29<u>•</u><a href="/a/news/experience/" target="_blank">经验之谈</a><u>•</u><span class="glyphicon glyphicon-eye-open" title="浏览次数"></span> <script src="/plus/count.php?view=yes&aid=48&mid=1" type='text/javascript' language="javascript"></script>
            </span>
            <div class="words">
                	<p>
		每年都会有一些新的网页布局创意产生，而使一些较老的布局方案淘汰。毫无疑问，2015年的网页布局是要响应各种终端设备。实际上，这种趋势早在2010年就在国外开始蔓延，我们可以预见的是，它在未来仍将是网页布局的核心方案。</p>
	<p>
		当然，这并不意味着网页布局必须朝着同一个标准化结构进行设计，相反，可能会有更多、更灵活的布局方式产生。在2015年，我们至少确定了网页布局发展的四个趋势，你可以从这些布局中找到最好的灵感，作为你<a href="http://www.1000zhu.com/" target="_blank">网页设计</a>的起点。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T4115X8-0.jpg" /></p>
	<p>
		<strong>1. 横向分割屏幕的网页布局</strong></p>
	<p>
		横向分割屏幕是指在网页设计时，将屏幕分为左右两个部分，这两个部分的宽高通常是相同的，且保持垂直横向排列。这么做的主要原因有两点：</p>
	<p>
		(1) 同时显示两个重要的特征。这种情况经常发生在企业推广产品或服务时，有两个同样重要的卖点或特性需要展示在页面上。例如，出版系统，即有利于出版商，又有利于读者。通过这种网页布局方式，设计师不需要区分主要或次要元素，而访客会自觉关注什么对自己更重要。</p>
	<p>
		(2) 表达一个二元性的想法。将屏幕一分为二，在设计上可以创建两个互不影响的空间，可以专注于不同的主题，甚至两个不同的产品。有时这种网页布局方式还可以突出显示两个互为相反的特征。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T41154V-1.jpg" /></p>
	<p>
		我们来看&nbsp;Desktime 首页的网页布局，他们将页面分为左右两部分，左侧用于满足有空闲办公室要出租的用户，右侧满足还没有自己的办公室，要寻租的用户。这将网站上两个同样重要的功能有效地展示了出来。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T411G37-2.jpg" /></p>
	<p>
		Eight&amp;Four，是一家数字营销公司，他们也将主页一份为二，网页设计基于白色和一个平面颜色的对比方式。这里用来表达两个不同的特性，在页面上分别展示。</p>
	<p>
		<strong>2. 自由盒子的网页布局 ( Container-Free )</strong></p>
	<p>
		事实上，这是一种极简主义的网页布局方式，它的布局理念是尽可能地消除图形结构，取而代之的是更加自由和开放的风格。它常常使用简单的线性结构，甚至只采用个性字体的文字进行布局。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T411GI-3.jpg" /></p>
	<p>
		从&nbsp;FOREWORD 的主页上可以清晰地看到，他们将总部设在巴黎和纽约，页面上没有任何图形图像设计，只通过开放式的字体和颜色的设计来告诉用户他们该关注什么。</p>
	<p>
		当然，极简主义的网页布局并不是完全不能使用图像，例如我们也可以添加一张大背景图，来达到视觉冲击的效果。这类似于我们前面分享的《<a href="http://www.1000zhu.com/article/52.html" target="_blank">大道至简！欣赏18款极简设计风格的网站</a>》一文。</p>
	<p>
		<strong>3. 块状网格的网页布局</strong></p>
	<p>
		我们必须在这里指出，网格结构的布局方式非常容易创建响应式网站。这种网页布局中的每个&ldquo;块&rdquo;将包含一个特定的内容，它可能是一个标题、一个图像或一行文本。</p>
	<p>
		每个&ldquo;块&rdquo;的尺寸是统一的，且可以灵活改变宽高以适应各种大小的屏幕。这使得&ldquo;网格布局&rdquo;成为一种非常通用的网页布局模式，它可以有效地用于PC网站或移动应用程序。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T411K24-4.jpg" /></p>
	<p>
		GREATS 是一家位于纽约的男鞋销售企业，他们的产品销售主要通过网站。GREATS 的网站选择了网格布局方式，在主页堆叠模块，每个模块显示一双鞋子的图像。</p>
	<p>
		<strong>4. 单一屏幕的网页布局</strong></p>
	<p>
		这种设计趋势我们在过去已经看到过很多了，即网站是基于一个大的背景图像进行设计的，并且总能适应各种终端屏幕。通常，这类网站非常简单，他们倾向于简约的设计感觉。</p>
	<p>
		然而，这种趋势的一个重要特征是&mdash;&mdash;没有网页滚动条。换句话说，这些网站总是采取单一屏幕，也就是一屏以内的网页布局方式。</p>
	<p>
		因为可用空间是有限的，这要求设计师必须有一个清晰的内容布局方案，而且要特别注意屏幕高度的相关信息。大多数情况下，图像会成为主导设计，利用其展示产品或唤起访客的情感。</p>
	<p align="center" style="">
		<img class="img-responsive" src="/uploads/allimg/150429/1T41155X-5.jpg" /></p>
	<p>
		Shamballa Jewels 是一家经营珠宝首饰的公司，该网站用一个独特页面来展示他们的产品，这个页面没有滚动条，且完全充满整个屏幕。</p>
	<p>
		该网站一个吸引人的地方是，背景总是在不停地切换，实际上，他们也同时使用了&ldquo;横向分割屏幕&rdquo;的网页布局手法，来配合图像的交替效果。</p>
 
            </div>
            <dl class="tags">
              <dt>文章关键词<span class="glyphicon glyphicon-tag"></span></dt>
              
              <dd><a href="/tags.php?/%E7%BD%91%E7%AB%99%E8%AE%BE%E8%AE%A1%E8%B6%8B%E5%8A%BF/" target="_blank">网站设计趋势</a></dd>
              
              <dd><a href="/tags.php?/%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80/" target="_blank">网页布局</a></dd>
              
            </dl>
            <div class="bdsharebuttonbox">
            	<a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
            </div>
        </div>
        <aside>
        	<div class="ad"><a href="/" title="做网站，找织梦" target="_blank"><img src="/templets/Picture/ad.jpg" alt="建网站，找织梦，网站建设品牌设计企业" /></a></div>
            <div class="caption"><h3>推荐阅读</h3></div>
            <ul class="items">
               <li>
                  <a href="/a/news/company/2015/0429/24.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1Q30561K-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/company/2015/0429/24.html" target="_blank" title="2015羊年大吉，织梦无忧网">2015羊年大吉，织梦无忧网 ...</a></span>
                  <span class="rel">今日<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>169</span>
                </li>
<li>
                  <a href="/a/news/industry/2015/0429/35.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1-1504291TK05R.jpg" /></a>
                  <span class="title"><a href="/a/news/industry/2015/0429/35.html" target="_blank" title="国家发改委推行电子政务">国家发改委推行电子政务 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>53</span>
                </li>
<li>
                  <a href="/a/news/experience/2015/0429/51.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1T6424N4-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/experience/2015/0429/51.html" target="_blank" title="钱都砸去哪里了，为什么">钱都砸去哪里了，为什么 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>164</span>
                </li>
<li>
                  <a href="/a/news/experience/2015/0429/50.html" target="_blank" class="thumb"><img src="/uploads/allimg/150429/1T55SP3-0-lp.jpg" /></a>
                  <span class="title"><a href="/a/news/experience/2015/0429/50.html" target="_blank" title="不是“PC端 + 移动端”的网">不是“PC端 + 移动端”的网 ...</a></span>
                  <span class="rel">37天前<span class="glyphicon glyphicon-eye-open" title="浏览次数"></span>180</span>
                </li>

            </ul>
        </aside>
    </section>
    
    <div class="dock">
        <ul class="icons">
        	<li class="up"><i></i></li>
            <li class="tel">
            	<i></i><p>建站咨询热线<br />150-2021-7966</p>
            </li>
            <li class="im">
            	<i></i><p><a href="http://wpa.qq.com/msgrd?v=3&uin=379144319&site=qq&menu=yes" target="_blank">点我，建站咨询</a></p>
            </li>
        </ul>
    </div>
    
    <script>        
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?a821a161aa4214f5ff5b8ca372960ebb";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();

        window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "分享下2015年的网页布局有哪些新的创意", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
    </script>
</body>
</html>